import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import axios from 'axios';
import './style.scss';

const F2 = require('@antv/f2/lib/index');
require('@antv/f2/lib/interaction/'); // 引入所有的交互行为
// 第一步：加载插件 ScrollBar
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
// 第二步：注册插件 ScrollBar
F2.Chart.plugins.register(ScrollBar); // 这里进行全局注册，也可以给 chart 的实例注册

export default class Histogram extends Component {

  componentDidMount() {
    const colorMap = {
      '本基金': '#1890FF',
      '沪深300': 'rgba(92, 219, 211, 0.5)',
      '同类平均': 'rgba(179, 127, 235, 0.5)'
    };
    const sizeMap = {
      '本基金': 2,
      '沪深300': 1,
      '同类平均': 1
    };

    axios.get('./data.json').then((res) => {
      console.log('res', res)
      const chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio,
        padding: [14, 'auto', 'auto'],
        animate: false // 关闭动画
      });
      chart.source(res.data, {
        reportDate: {
          type: 'timeCat',
          tickCount: 5,
          range: [0, 1],
          mask: 'YYYY-MM-DD'
        },
        name: {
          values: ['沪深300', '同类平均', '本基金']
        }
      });
      chart.legend(false); // 不使用默认图例
      chart.tooltip(false); // 初始状态关闭 tooltip
      chart.line({
        sortable: false
      }).position('reportDate*rate').color('name', function (val) {
        return colorMap[val];
      }).size('name', function (val) {
        return sizeMap[val];
      }).animate({
        appear: {
          duration: 500
        },
        update: {
          animation: 'lineUpdate',
          duration: 500
        }
      });

      chart.interaction('pinch').interaction('pan');
      // 定义进度条
      chart.scrollBar({
        mode: 'x',
        xStyle: {
          offsetY: -5
        }
      });
      chart.render();
    });
  }

  render() {
    return (
      <div className='trend'>
        <canvas id="mountNode"></canvas>
        <Link to='/' className='goBack'>回到home页</Link>
      </div>
    );
  }
  ;
}